<!-- 底部抽屉，不含按钮 -->
<template>
  <div class="foot-drawer" >
    <div :class="mainClass" :style="mainStyle" class="main">
      <div class="drawer-body" :style="bodyStyle">
        <slot />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 是否打开
    display: {
      type: Boolean,
      default: true
    },
    // 是否显示遮罩
    mask: {
      type: Boolean,
      default: true
    },
    // 宽度
/*    width: {
      type: String,
      default: '100%'
    },*/
    right:{
      type: String,
      defalt: '0px',
    },
    // 高度
    height: {
      type: String,
      default: '150px'
    },
    // 是否在父级元素中打开
    inner: {
      type: Boolean,
      default: false
    }
  },
  watch:{
    display(){
      this.mainStyle = {
        right: this.right,
        height: this.height,
        bottom: this.display ? '0' : `-${this.height}`,
        borderTop: this.mask ? 'none' : '1px solid #eee',
      }
    }
  },
  computed: {
    mainClass: function () {
      return {
        'main-show': this.display,
        'main-hide': !this.display,
        inner: this.inner
      }
    },
    mainStyle: function () {
/*      let leng=this.height.length;
      //console.log(this.height);
      let top="50%";
      if (this.height.substring(leng-1,leng)=="%") {
        top = (100-this.height.substring(0, leng - 1)) * 0.5 + "%";
        //return {'top':(100-this.height.substring(0, leng - 1)) * 0.5 + "%"}
      }*/
      //console.log("top: %o",top);
      return {
        //width: this.width,
        right: this.right,
        height: this.height,
        //bottom: this.display ? '0' : `-${this.height}`,
        bottom: this.display ? '0' : `-${this.height}`,
        borderTop: this.mask ? 'none' : '1px solid #eee',
        //'top':top,
      }
    },
    bodyStyle: function () {
      return {
        height: this.height,
        //width: this.width
        right: this.right,
      }
    }
  }
}
</script>
<style lang="less" scoped>
.foot-drawer{
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: -150px;
  //width: 100%;
  right:0;
  height: 150px;
  .main {


    //border-bottom-right-radius: 10px; //右下角园形
    //border-top-right-radius: 10px; //右上角园形
    //background: #2d8cf0;
    /*background-color: rgba(8, 63, 231, 0.9);*/
    background-color: rgb(25, 49, 112);
    transition: all 0s;
  }
  .main-show {
    opacity: 1;
  }
  .main-hide {
    opacity: 0;
  }
  .inner {
    position: absolute;
  }
  .drawer-body {
    // padding: 20px;
    font-size: 14px;
    overflow: auto;
  }
}
</style>
